import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
import styles from './index.module.less'

const LegendItem = props => {
    const { color, name, value } = props
    return (
        <div key={name} className={styles.legend_box}>
            <div className={styles.legend_color} style={{ background: color }} />
            <div className={styles.legend_desc}>
                <div>{name}</div>
                <div>{value}</div>
            </div>
        </div>
    )
}

export default function (props) {
    const { chartData = [], rate, defaultItem, dimensionType } = props
    const chartRef = useRef()
    let pieChart = null

    const colors = [
        '#4AA4FF',
        '#53FFE0',
        '#FF9341',
        '#FFCB3D',
        '#D669FF',
        '#4AFFAB',
        '#FF6E53',
        '#4AE3FF',
        '#638DFF',
        '#FF8EC9',
        '#918BFF',
        '#33E245',
        '#E94A8C',
        '#58B5FF',
        '#4953F1',
        '#56BDA8',
        '#0DA965',
        '#008ADA',
        '#FF4949',
        '#F0D800',
    ]

    const options = {
        color: colors,
        series: [
            {
                type: 'pie',
                radius: ['70%', '90%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                },
                labelLine: {
                    show: false,
                },
                data: chartData,
            },
        ],
    }

    function renderChart() {
        const chart = echarts.getInstanceByDom(chartRef.current)
        if (chart) {
            pieChart = chart
        } else {
            pieChart = echarts.init(chartRef.current)
        }
        pieChart.setOption(options)
    }

    // useEffect(() => {
    //   renderChart()

    //   return () => {
    //     // pieChart && pieChart.dispose()
    //   }
    // })

    useEffect(() => {
        renderChart()

        // 匹配默认选中项
        let targetIndex = -1
        chartData?.forEach((item, index) => {
            if (defaultItem === item.name) {
                targetIndex = index
                return
            }
        })

        targetIndex > -1 &&
            setTimeout(() => {
                pieChart.dispatchAction({
                    type: 'highlight',
                    dataIndex: targetIndex,
                })
            }, 750)

        return () => {
            pieChart && pieChart.dispose()
        }
    }, [chartData, defaultItem])

    return (
        <div className={styles.piechart_box}>
            <div className={styles.chart_title}>
                {/* 1-MBTI、2-霍兰德、3-自组题、4、总分规则题 */}
                {dimensionType === '4' ? (
                    <div>
                        你已超过<span style={{ color: '#0089ff' }}>{rate}%</span>的人
                    </div>
                ) : (
                    <div>
                        参与测评的人群中，<span style={{ color: '#0089ff' }}>{rate}%</span>
                        的人与你相同
                    </div>
                )}
            </div>

            <div className={styles.chart_box}>
                <div className={styles.left_box}>
                    {/* 圆环图 */}
                    <div style={{ width: '100%', height: '100%' }} ref={chartRef} />
                </div>
                {/* 自定义颜色展示 */}
                <div className={styles.right_box}>
                    {chartData?.map((item, index) => {
                        return <LegendItem key={item.name} color={colors[index]} name={item.name} value={item.value} />
                    })}
                </div>
            </div>
        </div>
    )
}
